<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/angular1.4.5.min.js"></script>
    <script src="angular-ui-router.js"></script>
    <style>
        #main{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
        <div ng-app="myApp" ng-controller="home123">
            <a ui-sref="/contacts">dianji</a>
            <a ui-sref="/">home</a>
            <!--<ui-view></ui-view>-->
            <div id="main">
                <div class="ui-view"></div>
            </div>

        </div>
        <script>
            var app = angular.module('myApp',['ui.router']);
            app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
                $stateProvider.state('contacts',{
                    abstract: true,
                    url:'/contacts',
//                    controller:'contact',
                    template : '<h2>我不是home页面</h2>'
//                    templateProvider: function($stateParams){
//                        return '<h1>'+'{{text}},'+$stateParams.name+'</h1>'
//                    }
                })
                    .state('home',{
                        abstract: true,
                        url: '/',
//                        controller: '',
                        templat : '<>我是home页面</>'
                    });
                $urlRouterProvider.otherwise('/');
            }]);

            app.controller('contact',function($scope){
                $scope.text='hi';
            })
                .controller('home123',function($scope){
                    $scope.name = 'lihao';

                });
        </script>
</body>
</html>